



<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="js/jquery-1.7.2.js"></script>
    </head>
    <body>

                    <table id="myTable" class="tabla">
                        <caption>Titulo de la tabla</caption>
                        <thead>
                            <tr>
                                <th>titulo Columna1</th>
                                <th>titulo Columna2</th>
                                <th>titulo Columna3</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <div gid="first" > Primera</div>
                                    <div gid="prev"> Previa </div>
                                    <div gid="paginaActual"> pagina actual</div>
                                    <div gid="next"> siguiente</div>
                                    <div gid="last"> ultima </div>
                                    <div gid="totalPages"> Total paginas</div>
                                    <div gid="totalRows"> Total rows </div>
                                </td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>contenido  </td>
                                <td>contenido  </td>
                                <td>contenido  </td>
                            </tr>
                        </tbody>
                    </table>
        
        
        
        
        <div id="tabla1">hola</div>
        
        
        
        
        
        
        
<script type="text/javascript">
    
    
  
    //=========================================================
    /**   Def objeto pagin  
     *
     * @param object config (id,firstrow,lastrow,paginaactual,data,labels) 
     *
     */
    
     function Pagin(config){
        this.firstRow = config.firstRow;
        this.lastRow = config.lastRow;
        this.id = config.id;
        this.paginaActual = config.paginaActual;
        this.data = null;
        this.labels = config.labels;
        this.renderTo = null;
    }
    
    Pagin.prototype.render = function(){
        var htmlTable =   " ";                
        htmlTable +=         " <table class='tabla'  id='table"+this.id+"'>";
        htmlTable +=                                          "<thead> </thead>"
        htmlTable +=                                            "<tfoot>"
        htmlTable +=                                                "<tr>"
        htmlTable +=                                                   "<td colspan='3'>"
        htmlTable +=                                                            "<div gid='first' > Primera</div>"
        htmlTable +=                                                             "<div gid='prev'> Previa </div>"
        htmlTable +=                                                             "<div gid='paginaActual'> pagina actual</div>"
        htmlTable +=                                                            "<div gid='next'> siguiente</div>"
        htmlTable +=                                                            "<div gid='last'> ultima </div>"
        htmlTable +=                                                            "<div gid='totalPages'> Total paginas</div>"
        htmlTable +=                                                           "<div gid='totalRows'> Total rows </div>"
        htmlTable +=                                                  "</td>"
        htmlTable +=                                                 "</tr>"
        htmlTable +=                                             "</tfoot>"
        htmlTable +=               "<tbody> </tbody>"
        htmlTable +=              "</table>";
        $('#'+this.id).html(htmlTable);
        
        //construir txt titulos
        var txttitulos = "<tr>";
        for(i=0; i<this.labels.length; i++){
            var  objtmp = this.labels[i];
             txttitulos += "<th>"+objtmp.head+"</th>";
        }
        txttitulos += "</tr>";
        $('#table'+this.id).find('thead').eq(0).html(txttitulos);
        
        //cargar la data inicial
        this.load();
        var txtdata = "";
        for(i=0; i<this.data.length; i++){
            var rowtmp = this.data[i];
            txtdata += "<tr>";
            for( x in rowtmp ){
                var txt = rowtmp[x];
                txtdata += "<td>"+txt+"</td>";
            }
            txtdata += "</tr>";
        }
        $('#table'+this.id).find('tbody').eq(0).html(txtdata);
    }
    
    Pagin.prototype.load = function(){
        //llamada a ajax para conseguir la data
        //por ahora lo hare a mano
        
        var data = [
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'},
             {col1:'coso1',col2:'coso2',col3:'coso3'}
        ];
        this.data = data;
    }
    
    
    Pagin.prototype.next = function(){
          
          
      $.ajax({
          type: "POST",
          url: "paginHandler.ajx.php",
          data: { firstRow: this.firstRow, lastRow: this.lastRow, paginaActual: this.paginaActual},
          success: function(response){
                $('#'+this.id).html(response);
          }
      });
      
    }
    
    /* FIN  Def objeto pagin   */
    
    
    
    
    $(document).ready(function(){
         
         var labelst = [
            { head:'col1'},
            { head:'col2'},
            { head:'col3'}
         ];
         var config = { id:'tabla1', firstRow: 1,  lastRow:50, paginaActual:1,labels: labelst };
         var paginador = new Pagin(config);
         paginador.render();
         
    });
    
    

    
    
</script>

        
        
        
        
        
    </body>
</html>
